import { reactive, ref, onMounted, h } from "vue";
import { useListPage } from "@/composables/useListPage";
import { useDialog } from "@/composables/useDialog";
import { useCRUD } from "@/composables/useCRUD";
import { deviceDetection } from "@pureadmin/utils";
import api from "@/api/seller/verify/futures";
import { useRoute } from "vue-router";

// 定义表单类型
interface FuturesFormState {
  keyword: string;
  status: string | number;
  seller_verify_create: string | [string, string] | null;
  buyer_verify_create: string | [string, string] | null;
  page: number;
  page_size: number;
}

export function use() {
  const route = useRoute();
  const hasProcessedInitialRoute = ref(false);

  // 使用 useListPage 优化列表页面逻辑
  const {
    formState,
    pagination,
    dataList,
    loading,
    multipleSelection,
    onSearch,
    resetForm,
    handlePageChange,
    handleSizeChange,
    handleSelectionChange
  } = useListPage<FuturesFormState>(api, {
    keyword: "",
    status: "",
    seller_verify_create: "",
    buyer_verify_create: "",
    page: 1,
    page_size: 10
  });

  // 使用 useDialog 优化弹窗逻辑
  const { openDialog } = useDialog();

  // 使用 useCRUD 优化 CRUD 操作
  const { read } = useCRUD(api);

  const columns: TableColumnList = [
    {
      type: "selection",
      align: "left"
    },
    {
      label: "状态",
      prop: "status",
      width: 100,
      slot: "status"
    },
    {
      label: "询价单号",
      prop: "verify_code",
      width: 250,
      align: "left",
      slot: "verify_code"
    },
    {
      label: "产品信息",
      width: 120,
      slot: "product"
    },
    {
      label: "采购数量",
      prop: "buyer_amount",
      width: 120
    },
    {
      label: "核实数量",
      prop: "seller_amount",
      width: 120
    },
    {
      label: "买家家备注",
      prop: "buyer_remark",
      minWidth: 120
    },

    {
      label: "价格信息",
      prop: "product.price",
      width: 150,
      slot: "price"
    },
    {
      label: "日期",
      prop: "buyer_expected_date",
      width: 250,
      slot: "date"
    },

    {
      label: "申请时间",
      prop: "buyer_verify_create",
      width: 180
    },
    {
      label: "核实时间",
      prop: "seller_verify_create",
      width: 180
    }
  ];

  function openSpotCheckDialog(title = "期货询价", id = "") {
    openDialog(() => import("../futuresForm.vue"), {
      title: `${title}`,
      id,
      props: { id },
      width: "60%",
      draggable: true,
      fullscreen: deviceDetection(),
      closeOnClickModal: false
    });
  }

  // 处理路由中的 verify_code 参数
  if (route.query.verify_code && !hasProcessedInitialRoute.value) {
    hasProcessedInitialRoute.value = true;
    const verifyCode = Array.isArray(route.query.verify_code)
      ? route.query.verify_code[0]
      : route.query.verify_code;

    openSpotCheckDialog("期货询价", verifyCode);
  }

  onMounted(() => {
    onSearch();
  });

  return {
    form: formState,
    loading,
    columns,
    dataList,
    pagination,
    multipleSelection,
    onSearch,
    resetForm,
    handlePageChange,
    handleSizeChange,
    openDialog: openSpotCheckDialog,
    handleSelectionChange
  };
}
